<!-- <template>
  <div v-if="pet">
    <h1>{{ pet.name }}</h1>
    <img :src="pet.image" alt="" />
    <p>{{ pet.description }}</p>
    <button @click="adoptPet(pet.id)">领养</button>
  </div>
  <div v-else>
    <p>宠物信息未找到。</p>
  </div>
</template>

<script>
import { getPetDetails, adoptPet } from '@/api';
export default {
  name: 'PetDetails',
  data() {
    return {
      pet: null
    };
  },
  methods: {
    fetchPet() {
      const petId = this.$route.params.id;
      getPetDetails(petId)
        .then(response => {
          this.pet = response.data;
        })
        .catch(error => {
          console.error('There was an error!', error);
        });
    },
    adoptPet(petId) {
      adoptPet(petId)
        .then(response => {
          alert('领养成功！');
          this.$router.push('/');
        })
        .catch(error => {
          console.error('领养失败', error);
        });
    }
  },
  mounted() {
    this.fetchPet();
  }
};
</script> -->